<template>
	<view class="cooperation">
		<view style="display: flex">
			<view @click="chooseImage(0)">
				<view class="head">
					<image class="head-img"  :src="trueAvatar"/>
				</view>
				<view class="head-text">
					<text class="iconfont" style="font-size:22upx;color:white">
						&#xe691;</text>
					<text style="line-height: 10upx">封面头像</text>
				</view>
			</view>
			<view style="font-size: 26upx;padding:20upx 30upx">
				<text style="color: #7D7D7D">姓名</text><text style="color: #ff4c4d">*</text>
				<input placeholder="请输入姓名" v-model="trueName" maxlength="6" style="margin-top: 10upx"/>
			</view>
		</view>
		<view style="margin:20upx 0 0 -30upx;width: calc(100% + 60upx);height:20upx;background: #F2F2F2;"/>
		<view style="font-size: 26upx;padding:20upx 0upx 20upx 0;border-bottom: 1px solid #ECECEC">
			<text style="color: #7D7D7D">我的职务</text><text style="color: #ff4c4d">*</text>
			<input placeholder="请输入您担任的职务，10字以内" v-model="jobPosition" maxlength="10" style="margin-top: 10upx"/>
		</view>
		<view style="font-size: 26upx;padding:20upx 0upx 20upx 0;border-bottom: 1px solid #ECECEC">
			<text style="color: #7D7D7D">微信号</text><text style="color: #ff4c4d">*</text>
			<input placeholder="请输入您微信号" v-model="wxAccount"  style="margin-top: 10upx"/>
		</view>
		<view style="font-size: 26upx;padding:20upx 0upx 20upx 0;border-bottom: 1px solid #ECECEC">
			<text style="color: #7D7D7D">微信二维码</text><text style="color: #ff4c4d">*</text>
			<view class="head" style="border: 1px dashed #7e7e7f;margin-top: 20upx" @click="chooseImage(1)">
				<image class="head-img" v-if="wxQrCodeUrl"  :src="wxQrCodeUrl"/>
				<view style="font-size: 80upx;color:#7e7e7f;text-align: center;width: 100%">+</view>
			</view>
		</view>
		<view style="font-size: 26upx;padding:20upx 0upx 20upx 0;border-bottom: 1px solid #ECECEC">
			<text style="color: #7D7D7D">语音介绍 </text></text>
			<view  style="width:100%;display: flex;justify-content: space-between;padding-top: 20upx">
				<view v-if="tempFilePath" @click="audioPlay" class="nav-back" style="width: 100px;height:60upx;margin-top: 2upx">
					<view class="nav-head" style="margin:0 30upx;border-radius: 0">
						{{duration}}"
					</view>
					<view>
						<text class="iconfont" :style="{fontSize:'60rpx',color:flag?'#0ABC64':'#7f7f7f'}">
							&#xe601;</text>
					</view>
				</view>
				<view v-else style="color:#757575;padding-top:4upx">让名片访客留下更深刻印象</view>
				<view style="color:#757575;display: flex"  @click="goRecord">
					<view style="padding-top:4upx">{{tempFilePath?"修改":"添加"}}</view>
					<view class="iconfont" style="font-size:40upx;">
						&#xe607;</view>
				</view>
			</view>
		</view>
		<view style="font-size: 26upx;padding:20upx 0upx 20upx 0;border-bottom: 1px solid #ECECEC">
			<text style="color: #7D7D7D">个人介绍</text><text style="color: #ff4c4d">*</text>
			<textarea placeholder="请输入个人介绍，600字以内" v-model="description" auto-height="true" maxlength="600" style="margin-top: 10upx"/>
		</view>
		<button type="primary" @click="preview" style="margin-top: 40upx"  class="button">
			预览
		</button>
	</view>
</template>

<script>
	import API from '../../common/api.js';

	var sourceType = [
		['camera'],
		['album'],
		['camera', 'album']
	]
	var sizeType = [
		['compressed'],
		['original'],
		['compressed', 'original']
	]
	export default {
		components:{
		},
		data() {
			return {
				height: uni.getSystemInfoSync().windowHeight,
				sourceTypeIndex: 2,
				sizeTypeIndex: 2,
				sourceType: ['拍照', '相册', '拍照或相册'],
				sizeType: ['压缩', '原图', '压缩或原图'],
				tempFilePath:null,
				backgroundAudioManager:null,
				description:'',
				trueAvatar:'',
				duration:0,
				trueName:'',
				jobPosition:'',
				wxAccount:'',
				wxQrCodeUrl:''
			}
		},
		onLoad(options){
			console.log(options,8787878)
			this.trueAvatar=options.trueAvatar
			this.duration=options.duration
			this.trueName=options.trueName
			this.jobPosition=options.jobPosition
			this.wxAccount=options.wxAccount
			this.wxQrCodeUrl=options.wxQrCodeUrl
			this.tempFilePath=options.tempFilePath
			this.description=options.description
			console.log(this.tempFilePath,777)
			this.audio()
			uni.setStorageSync('audio',1)
		},
		onShow(){
			uni.getStorage({
				key: 'tempFilePath',
				success: (res)=> {
					console.log(res,11111)
					this.tempFilePath=res.data
					uni.removeStorageSync('tempFilePath');
					uni.removeStorageSync('audio',1)
					this.audio()
				}
			});

		},
		methods:{
			preview(){
				if(!this.trueAvatar){
					uni.showToast({
						title: '请上传封面头像',
						icon: 'none' })
				}else if(!this.trueName){
					uni.showToast({
						title: '请输入姓名',
						icon: 'none' })
				}else if(!this.jobPosition){
					uni.showToast({
						title: '请输入职务',
						icon: 'none' })
				}else if(!this.wxAccount){
					uni.showToast({
						title: '请输入微信号',
						icon: 'none' })
				}else if(!this.wxQrCodeUrl){
					uni.showToast({
						title: '请上传微信二维码',
						icon: 'none' })
				}else if(!this.description){
					uni.showToast({
						title: '请输入个人介绍',
						icon: 'none' })
				}else{
					uni.setStorage({
						key: 'cardData',
						data: JSON.stringify({ trueName:this.trueName, jobPosition: this.jobPosition,
							wxAccount:this.wxAccount,wxQrCodeUrl:this.wxQrCodeUrl,description:this.description,tempFilePath:this.tempFilePath}),
						success: ()=> {
							uni.navigateTo({
								url: '../index/preview?trueName='+this.trueName+'&jobPosition='+this.jobPosition+'&wxAccount='+this.wxAccount
										+'&wxQrCodeUrl='+this.wxQrCodeUrl+'&description='+this.description
										+'&tempFilePath='+this.tempFilePath+'&trueAvatar='+this.trueAvatar
							});
						} });
				}
			},
			audio(){
				this.backgroundAudioManager = uni.getBackgroundAudioManager()
				this.backgroundAudioManager.title = '语音介绍'
				this.backgroundAudioManager.epname = '语音介绍'
				this.backgroundAudioManager.singer = '微信用户'
				this.backgroundAudioManager.src = this.tempFilePath
						//'http://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E061FF02C31F716658E5C81F5594D561F2E88B854E81CAAB7806D5E4F103E55D33C16F3FAC506D1AB172DE8600B37E43FAD&fromtag=46'
				// this.backgroundAudioManager.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000'
				this.backgroundAudioManager.onCanplay(res=>{
					this.backgroundAudioManager.pause()
					this.backgroundAudioManager.seek(0)
					setTimeout(() => {
						this.duration=parseInt(this.backgroundAudioManager.duration+1)
						console.log(this.duration,8888)
					}, 500)
				})
				this.backgroundAudioManager.onEnded(res=>{
					this.backgroundAudioManager.src = this.tempFilePath
					this.backgroundAudioManager.pause()
					this.flag=false
				})
			},
			audioPlay() {
				if(this.flag){
					this.backgroundAudioManager.stop()
					this.backgroundAudioManager.src = this.tempFilePath
				}else{
					this.backgroundAudioManager.play()
				}
				this.flag=!this.flag
			},
			goRecord(){
				uni.navigateTo({
					url: '../index/record'
				});
			},
			chooseImage: async function(num) {
				uni.chooseImage({
					sourceType: sourceType[this.sourceTypeIndex],
					sizeType: sizeType[this.sizeTypeIndex],
					count: 1,
					success: (res) => {
						console.log(2)
						this.urlTobase64Default(res.tempFilePaths[0],num);
					}
				})
			},
			urlTobase64Default(url,num){
				wx.getFileSystemManager().readFile({
					filePath: url, //选择图片返回的相对路径
					encoding: 'base64', //编码格式
					success: res => { //成功的回调
						let base64 = 'data:image/jpeg;base64,' + res.data; //不加上这串字符，在页面无法显示的哦
						let params = {
							base64Str: base64
						}
						API.base64Upload(params).then(res=>{
							if(res.status==200){
								num?this.wxQrCodeUrl=res.data:this.trueAvatar=res.data
								console.log(this.wxQrCodeUrl,66666)
							}else{
								uni.showModal({
									title: '提示',
									content: '上传失败，请重试',
									showCancel: false,
								});
							}
						})
					}
				})
			},
		}
	}
</script>

<style scoped>
	.cooperation{
		/*background: #F9F9F9;*/
		padding: 0 30upx 100upx 30upx;
	}
	.head{
		height: 136upx;
		width: 136upx;
		border-radius: 8upx;
		overflow: hidden;
	}
	.head-img{
		width: 100%;
		height: 100%;
	}
	.head-text{
		width: 136upx;
		height: 28upx;
		border-bottom-left-radius: 8upx;
		border-bottom-right-radius: 8upx;
		background-color: rgba(59, 59, 59, 0.93);
		text-align: center;
		color: rgba(240, 240, 240, 1);
		font-size: 18upx;
		font-family: -apple-system;
		position: relative;
		margin-top: -26upx;
	}
</style>
